<template>
	<view class="module_video_block">
		<video class="myVideo" :src="videoSrc" :controls="controls" :autoplay="autoplay" :loop="loop" :muted="muted" :enable-progress-gesture="enable_progress" :style="[module_style]"></video>
		<!-- :style="[module_style]" -->
	</view>
</template>

<script>
import storeMixin from '@/store/storeMixin';
export default {
	mixins: [storeMixin],
	name: 'myvideo',
	props: {
		videoSrc: {
			type: [String],
			default: '',
		},
		controls: {
			type: [Boolean],
			default: false,
		},
		autoplay: {
			type: [Boolean],
			default: false,
		},
		loop: {
			type: [Boolean],
			default: false,
		},
		muted: {
			type: [Boolean],
			default: false,
		},
		enable_progress: {
			type: [Boolean],
			default: false,
		},
		width: {
			type: [Number, String],
			default: '100',
		},
		height: {
			type: [Number, String],
			default: '0',
		},
		radius: {
			type: [Number, String],
			default: '0',
		},
	},

	data() {
		return {};
	},
	created() {},
	mounted() {},
	computed: {
		module_style() {
			let style = {};
			if (this.width > 0) {
				style['width'] = `${this.width}rpx`;
			}
			if (this.height > 0) {
				style['height'] = `${this.height}rpx`;
			} else {
				style['height'] = `${this.width}rpx`;
			}

			if (this.radius > 0) {
				style['border-radius'] = `${this.radius}rpx`;
			}
			return style;
		},
	},
	methods: {},
	watch: {},
};
</script>

<style lang="scss">
.module_video_block {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.module_video {
	position: relative;
	z-index: 4;
	width: 100%;
	height: 100%;
}
</style>
